<!-- 停车场设备类别统计 -->
<template>
  <div class="w-100 h-100">
    <fakeLenfend
      :color="['rgb(3, 230, 254)', 'rgb(251, 216, 160)']"
      :text="['交流电充电桩', '直流电充电桩']"
    >
    </fakeLenfend>

    <div class="w-100" style="height: 90%">
      <div
        id="tccsblb"
        class="w-100"
        style="height: 100%; position: relative"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import fakeLenfend from "@/components/project/fakeLegend.vue";

let xLabel = [ "晴川街道",
        "龙阳街道",
        "建桥街道",
        "鹦鹉街道",
        "洲头街道",
        "四新街道",
        "五里墩街道",
        "琴断口街道",
        "江汉二桥街道",
        "永丰街道",
        "江堤街道",
        "汉阳经济开发区",

      ];
let dataValue = [20, 30, 40, 35, 34, 20, 30, 40, 35, 34, 23, 45];
let dataValue1 = [40, 35, 34, 15, 56, 20, 30, 40, 35, 34, 23, 45];
let option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: "rgb(126,199,255)",
      },
    },
  },

  grid: {
    top: "10%",
    left: "10%",
    right: "5%",
    bottom: "25%",
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      axisLine: {
        //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: "rgb(41,188,245)",
        },
      },
      axisLabel: {
        rotate: 45, // 设置标签倾斜的角度
            interval: 0, // 显示所有标签
        //坐标轴刻度标签的相关设置
        textStyle: {
          fontSize: 20,
          color: "#667A8E",
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "#233653",
        },
      },
   
      data: xLabel,
    },
  ],
  yAxis: [
    {
      name: "",
      nameTextStyle: {
        color: "#fff",
        fontSize: 12,
        padding: [0, 60, 0, 0],
      },
      // minInterval: 1,
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "#1160a0",
          type: "dashed",
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#008de7",
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: 20,
          fontFamily: "OPPOSans-Regular",
          color: "rgba(108, 128, 151, 1)",
        },
        formatter: function(value:any) {
                return value + ' 个'; // 在这里替换 '单位' 为你需要的单位
            }
      },
      axisTick: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "交流电充电桩",
      type: "line",
      symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
      smooth: true,
      lineStyle: {
        normal: {
          width: 3,
          color: "rgb(3, 230, 254)", // 线条颜色
        },
      },
      itemStyle: {
        normal: {
          color: "#00f0ff", //拐点颜色
          // borderColor: '#fff600',//拐点边框颜色
          // borderWidth: 13//拐点边框大小
          label: {
            show: true, //开启显示
            color: "#fff",
            position: "top", //在上方显示
            formatter: function (res: any) {
              if (res.value) {
                return res.value;
              } else {
                return 0;
              }
            },
          },
        },
      },
      symbolSize: 8, //设定实心点的大小
      areaStyle: {
        normal: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "#00ffa230",
              },
              {
                offset: 0.6,
                color: "#00ffa220",
              },
              {
                offset: 1,
                color: "#00ffa210",
              },
            ],
            false
          ),
        },
      },
      data: dataValue,
    },
    {
      name: "直流电充电桩",
      type: "line",
      symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
      smooth: true,
      lineStyle: {
        normal: {
          width: 3,
          color: "rgb(251, 216, 160)", // 线条颜色
        },
      },
      itemStyle: {
        normal: {
          color: "#fff600", //拐点颜色
          // borderColor: '#fff600',//拐点边框颜色
          // borderWidth: 13//拐点边框大小
          label: {
            show: true, //开启显示
            color: "#fff",
            position: "top", //在上方显示
            formatter: function (res: any) {
              if (res.value) {
                return res.value;
              } else {
                return 0;
              }
            },
          },
        },
      },
      symbolSize: 8, //设定实心点的大小
      areaStyle: {
        normal: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "#ffba0030",
              },
              {
                offset: 0.6,
                color: "#ffba0020",
              },
              {
                offset: 1,
                color: "#ffba0010",
              },
            ],
            false
          ),
        },
      },
      data: dataValue1,
    },
  ],
};
let myChart: any;
onMounted(() => {
   myChart = echarts.init(document.getElementById("tccsblb") as HTMLElement);

  myChart.setOption(option);
});
onBeforeUnmount(() => {
  // 销毁 ECharts 实例
  if (myChart) {
    myChart.dispose();
  }
});
</script>

<style></style>
